<template>
	<view class="list">
		<checkbox-group @change="change">
			<label class="list__item" v-for="(item,index) in list" :key="item.Id" :data-id="item.Id">
				<view class="list__item--left">
					<image :src="item.img" mode="aspectFill"></image>
				</view>
				<view class="list__item--center">
					<view class="list__item--center-title">{{item.SubjectTitle}}</view>
					<view class="list__item--center-content">{{item.CoverContent}}</view>
				</view>
				<view class="list__item--right">
					<checkbox :value="item.Id" />
				</view>
			</label>
		</checkbox-group>
	</view>
</template>

<script>
	import _data from '@/common/_data.js'
	import _custom from '@/common/_custom.js'
	import DefaultSeries from '@/static/theme/default/community/tiezi.png';
	import { timestampFormat,sendBackFunction,formatImg,entitiestoUtf16 } from '@/common/custom_util.js';
	
	export default {
		data() {
			return {
				obsusername: _data.localData('name'),
				pxid: _data.localData('userid'),
				keyword: '',
				list: [],
				checkIds: [],
				selectLists: [],
				noData: false,
				noMore: false,
				currentpage: 1,
				pagesize: 10,
			}
		},
		onLoad(options) {
			this.selectLists = options.data ? JSON.parse(options.data) : this.selectLists;
			this.getMySubjectListNotInSeries();
		},
		onNavigationBarButtonTap() {
			let temp = [];
			this.list.forEach(item => {
				this.checkIds.forEach(v => {
					if(item.Id == v) temp.push(item)
				})
			})
			sendBackFunction('getSelectList',temp);
		},
		onReachBottom() {
			if(!this.noMore) {
				this.currentpage += 1;
				this.getMySubjectListNotInSeries();
			}
		},
		methods: {
			/**
			 * 获取合集详情
			 */
			getMySubjectListNotInSeries() {
				let that = this;
				return new Promise((resolve, reject) => {
					_custom.getDataJava({
						apiname: 'getMySubjectListNotInSeries',
						currentpage: this.currentpage,
						pagesize: this.pagesize,
						apiparam: {
							obsusername: this.obsusername,
							obspxid: this.pxid,
							keyword: this.keyword,
						},
						success(res) {
							if(res.length < that.pagesize) that.noMore = true;
							if(that.currentpage == 1 && !res.length) {
								that.noMore = false;
								that.noData = true;
							}
							if(!res.length) return
							let temp = [];
							res.forEach(item => {
								item.checked = false;
								item.img = item.DefaultImage ? formatImg(item.DefaultImage) : DefaultSeries;
								item.UpdateTime = timestampFormat(item.UpdateTime);
								item.SubjectTitle = entitiestoUtf16(item.SubjectTitle);
								
								let flag = false;
								that.selectLists.forEach(v => {
									if(item.Id == v.Id) flag = true
								})
								if(!flag) temp.push(item)
							})
							that.list.push(...temp);
						}
					})
				})
			},
			change(v) {
				this.checkIds = v.detail.value;
			}
		}
	}
</script>

<style scoped lang="scss">
	.list {
		
		&__item {
			display: flex;
			justify-content: space-between;
			padding: 20rpx;
			background-color: #fff;
			margin-bottom: 20rpx;
			
			&--left {
				background-color: #65B0FF;
				border-radius: 20rpx;
				height: 140rpx;
				
				image {
					width: 200rpx;
					height: 100%;
					border-radius: 10rpx;
				}
			}
			
			&--center {
				width: calc(100% - 300rpx);
				padding: 0 20rpx;
				box-sizing: border-box;
				
				&-title {
					font-size: 33rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
				
				&-content {
					font-size: 28rpx;
					color: #aaa;
					overflow: hidden;
					text-overflow: ellipsis;
					display:-webkit-box;
					-webkit-box-orient:vertical;
					-webkit-line-clamp:2;
				}
			}
			
			&--right {
				width: 100rpx;
				display: flex;
				justify-content: space-around;
				align-items: center;
				
				image {
					width: 40rpx;
					height: 40rpx;
				}
			}
		}
	}
	
	.list /deep/ .uni-checkbox-input {
		border-radius: 50%;
		border-color: #aaa;
	}
</style>
